今天就來説説html裏的class吧
class是一種屬性他可以指定元素的類別，多個元素可以用同一個class。class主要用於定義css的地方，而他也可以運用在javascript上。而class怎麽使用呢~
首先，我們先來開一個div
<div class="first">
<p>It just is an example.</p>
</div>
這樣，接下來可以在css上去設計你自己想要的東西
body{
background-color: rgb(202, 202, 202);
}
.first{
background-color: grey;
color: white;
border: 2px solid black;
width: 500px;
margin: 20px;
}
他就會變這樣啦
他也可以在不同屬性上去展示出來，例如當我分別運用在div以及h1上時他也是可以出現一樣的css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
background-color: rgb(202, 202, 202);
}
.first{
background-color: grey;
color: white;
width: 500px;
margin: 20px;
}
</style>
</head>
<body>
<h1 class="first">This is a title.</h1>
<div class="first">
<p>It just is an example.</p>
</div>
</body>
</html>
但同時在一個元素裏是可以擁有兩個class的就例如
<div class="first second">
<p>It just is an example.</p>
</div>
<div class="first">
<p>This is a another example.</p>
</div>
我在second上設定了另一個字體所以可以看得出在同一個div裏但可以同時擁有兩個class的特別。
對於class的闡述就到這裏啦，我們明天再見~
iThome鐵人賽
看影片追技術